<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购单管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">

    <h2>欢迎你：{{userInfo.user.username}}，部门信息：{{userInfo.user.dname}}</h2>

    <el-button type="primary" @click="toAdd">添加采购单</el-button>


    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="orderId"
                label="订单号">
        </el-table-column>
        <el-table-column
                prop="code"
                label="编码">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称">
        </el-table-column>
        <el-table-column
                prop="orderType"
                label="订单类型">
        </el-table-column>
        <el-table-column
                prop="programName"
                label="项目名称">
        </el-table-column>
        <el-table-column
                prop="orderRemark"
                label="备注">
        </el-table-column>
        <el-table-column
                prop="supplierName"
                label="供应商">
        </el-table-column>
        <el-table-column
                prop="moneyType"
                label="币种">
        </el-table-column>
        <el-table-column
                prop="totalMoney"
                label="订单金额">
        </el-table-column>
        <el-table-column
                prop="preMoney"
                label="预付款">
        </el-table-column>

        <el-table-column
                label="开始时间">
            <template slot-scope="scope">
                {{scope.row.start | format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="结束时间">
            <template slot-scope="scope">
                {{scope.row.end | format('yyyy-MM-dd')}}
            </template>
        </el-table-column>


        <el-table-column
                prop="buyerUsername"
                label="采购员">
        </el-table-column>
        <el-table-column
                prop="dept"
                label="采购部门">
        </el-table-column>

        <el-table-column
                label="审核状态">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.shenheState=='通过'">{{scope.row.shenheState}}</el-tag>
                <el-tag type="info" v-if="scope.row.shenheState=='审核中'">{{scope.row.shenheState}}</el-tag>
                <el-tag type="danger" v-if="scope.row.shenheState=='未通过'">{{scope.row.shenheState}}</el-tag>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>



    <el-dialog title="新建采购单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="form.orderId" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="编码" :label-width="formLabelWidth">
                <el-input v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="订单类型" :label-width="formLabelWidth">
                <el-select v-model="form.orderType" placeholder="请选订单类型">
                    <el-option label="标准采购单" value="标准采购单" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="所属项目" :label-width="formLabelWidth">
                <el-select v-model="form.programId" placeholder="请选所属项目">
                    <el-option :label="s.name" :value="s.id" :key="s.id" v-for="s in programList"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="订单备注" :label-width="formLabelWidth">
                <el-input v-model="form.orderRemark" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
                <el-select v-model="form.supplierId" placeholder="请选供应商" @change="updateWuliao">
                    <el-option :label="s.name" :value="s.id" :key="s.id" v-for="s in supplierList"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="币种" :label-width="formLabelWidth">
                <el-select v-model="form.moneyType" placeholder="请选订单类型">
                    <el-option label="人民币" value="人民币" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="总金额" :label-width="formLabelWidth">
                <el-input v-model="form.totalMoney" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="预付款" :label-width="formLabelWidth">
                <el-input v-model="form.preMoney" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.start"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.end"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="签订时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.signTime"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="form.state" label="新建">新建</el-radio>
                <el-radio v-model="form.state" label="进行中">进行中</el-radio>
            </el-form-item>

            <el-form-item label="计税类型" :label-width="formLabelWidth">
                <el-select v-model="form.taxType" placeholder="请选计税类型">
                    <el-option label="增值税" value="增值税" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="税率" :label-width="formLabelWidth">
                <el-input v-model="form.taxRate" type="number" autocomplete="off"></el-input>
            </el-form-item>
            <el-divider></el-divider>
            <el-button @click="toAddNewLine">新增订单行</el-button>
            <el-table
                    :data="formTableData"
                    style="width: 100%">
                <el-table-column
                        label="物料">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.materialId" placeholder="请选择物料">
                            <el-option :label="w.name" :value="w.id" v-for="w in wuliaoList" ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.num"  placeholder="请填写数量"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="单价">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unitPrice"  placeholder="请填写单价"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="单位">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unit"  placeholder="请填写单位"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="总金额">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.money" placeholder="总金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="备注">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.remark" placeholder="总金额"></el-input>
                    </template>
                </el-table-column>
            </el-table>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addProgram">确 定</el-button>
        </div>

    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{

            tableData:[],
            total:0,
            query:{
                page:1,
                pageSize:2
            },

            //表单添加需要
            dialogFormVisible: false,
            form: {
                orderId:"",
                name: '',
                code:"",
                orderType:"标准采购单",
                programId:"",
                orderRemark:"",
                supplierId:"",
                moneyType:"",
                start:"",
                end:"",
                signTime:"",
                preMoney:"",
                state:"新建",
                taxType:"",
                taxRate:"",
                caigouOrderMaterial:[]
            },
            typeIdsArray:[],//级联选择器需要的数据模型
            formLabelWidth: '120px',
            formTableData:[],//选择的物料信息
            wuliaoList:[],//当前选择的供应商下的物料集合

            supplierList:[],//供应商集合
            programList:[],//项目集合
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            }
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            updateWuliao(sid){
                axios.post("/material/findBySid?sid="+sid).then(res=>{
                    this.$message.success("当前供应商下物料查询成功")
                    this.wuliaoList = res.data;
                })
            },
            toAddNewLine(){
                this.formTableData.push({
                    orderId:"",
                    materialId:"",
                    num:"",
                    unitPrice:"",
                    unit:"",
                    money:"",
                    remark:"",
                })
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            addProgram(){


                this.form.caigouOrderMaterial = this.formTableData;

                axios.post("/caigou-order/add",this.form,{
                    headers: {
                        'token': this.userInfo.token,
                    }
                }).then(res=>{
                    this.form = {
                        orderId:"",
                        name: '',
                        code:"",
                        preMoney:"",
                        orderType:"标准采购单",
                        programId:"",
                        orderRemark:"",
                        supplierId:"",
                        moneyType:"",
                        start:"",
                        end:"",
                        signTime:"",
                        state:"新建",
                        taxType:"",
                        taxRate:"",
                        caigouOrderMaterial:[]
                    }
                    this.formTableData = [];
                    this.wuliaoList = [];
                    this.dialogFormVisible = false;
                    this.initData();
                })

            },
            toAdd(){
                axios.post("/caigou-order/findNewOrderId").then(res=>{
                    this.form.orderId = res.data
                })
                this.dialogFormVisible = true;

            },
            initData(){
                axios.post(`/caigou-order/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;

                })
            },
            initsupplierList(){
                axios.post("/supplier/findAll").then(res=>{
                    this.supplierList = res.data;
                })
            },
            initProgramList(){
                axios.post("/program/findAll").then(res=>{
                    this.programList = res.data;
                })
            }

        },
        created(){
            this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            this.initData()
            this.initsupplierList();
            this.initProgramList();
        }
    })
</script>

</body>
</html>